<template>
  <van-popup
    :show="modelValue"
    @update:show="updateShow"
    position="center"
    :style="{ width: '90%' }"
    round
  >
    <div class="p-4">
      <h2 class="text-lg font-bold mb-4">意见反馈</h2>

      <van-form @submit="handleSubmit">
        <div class="mb-4">
          <label class="text-red-500 align-middle">*</label>
          <span class="font-medium">投诉理由</span>
          <van-field
            v-model="selectedReason"
            is-link
            readonly
            label=""
            placeholder="请选择或者输入投诉理由"
            @click="showPicker = true"
            :rules="[{ required: true, message: '请选择投诉理由' }]"
          />
          <van-popup v-model:show="showPicker" position="bottom">
            <van-picker
              :columns="formattedReasons"
              @confirm="onConfirm"
              @cancel="showPicker = false"
            />
          </van-popup>
        </div>

        <div class="mb-4">
          <label class="text-red-500 align-middle">*</label>
          <span class="font-medium">联系电话</span>
          <van-field
            v-model="phone"
            type="tel"
            placeholder="请输入联系电话"
            :rules="[
              { required: true, message: '请输入联系电话' },
              { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码' }
            ]"
          />
        </div>

        <div class="flex justify-end gap-2 mt-6">
          <van-button plain type="default" @click="handleCancel"
            >取消</van-button
          >
          <van-button type="primary" native-type="submit">提交</van-button>
        </div>
      </van-form>
    </div>
  </van-popup>
</template>

<script setup lang="ts">
interface ReasonData {
  dictId: number;
  dictPid: null;
  dictName: string;
  dictValue: string;
  dictDescribe: string;
  createTime: null;
  updateTime: null;
}

import { http } from "@/utils/http";
import { computed, ref, watch } from "vue";

const props = defineProps<{
  modelValue: boolean;
}>();

const emit = defineEmits(["update:modelValue", "submit"]);

const updateShow = (value: boolean) => {
  emit("update:modelValue", value);
};

const showPicker = ref(false);
const selectedReason = ref("");
const selectedReasonId = ref<number | null>(null);
const phone = ref("");
const complaintReasons = ref<ReasonData[]>([]);

// 格式化数据用于picker显示
const formattedReasons = computed(() => {
  return complaintReasons.value.map(reason => ({
    text: reason.dictDescribe,
    value: reason.dictName
  }));
});

const getComplaintDict = async () => {
  try {
    const data = await http.request<ReasonData[]>({
      url: "/dict/getSelect",
      method: "POST",
      data: {
        dictName: "COMPLAINTS_ARGUMENT"
      }
    });
    if (data) {
      complaintReasons.value = data;
    }
  } catch (error) {}
};

const onConfirm = value => {
  if (value.selectedOptions.length == 0) return;
  selectedReason.value = value.selectedOptions[0].text;
  selectedReasonId.value = value.selectedOptions[0].value;
  showPicker.value = false;
};

const handleCancel = () => {
  emit("update:modelValue", false);
  selectedReason.value = "";
  selectedReasonId.value = null;
  phone.value = "";
};

const handleSubmit = () => {
  if (!selectedReasonId.value || !phone.value) {
    return;
  }
  // Handle submission logic here
  emit("submit", {
    complaintsArgument: selectedReasonId.value,
    phoneNumber: phone.value
  });
  selectedReason.value = "";
  selectedReasonId.value = null;
  phone.value = "";
};
watch(
  () => props.modelValue,
  nv => {
    if (nv) {
      getComplaintDict();
    }
  }
);
</script>
